.blogContainer {
	margin: var(--size-xxLarge) auto;
	max-width: var(--max-width);

	hr {
		margin-top: var(--size-xxLarge);
		color: var(--color-divider-on-dark);
		border: 0.5px solid var(--color-divider-on-dark);
	}

	h4 {
		padding: 0 var(--size-medium);
	}
}

.blogSection {
	padding-top: 0px !important;
}

.tagContainer {
	margin: calc(20 * var(--space-unit)) auto calc(4 * var(--space-unit));
	max-width: var(--max-width);
	padding: 0 var(--size-medium);
}

.copyOnDark {
	color: #dfdfdf;
}

.tagHeader {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.suggestedBlogPost {
	margin: var(--size-xSmall) 0 !important;
	padding: var(--size-small) 0 !important;
	cursor: pointer;

	.cardImage {
		min-height: 160px;
		max-height: 170px;
		border: 2px solid #30294e;
	}

	.cardSection {
		gap: var(--size-xxSmall);
	}

	.suggestedPostTitle {
		color: var(--color-white);
		text-align: left;
	}
}

.blogPost {
	margin: var(--size-large) auto;
	padding: var(--size-small) var(--size-medium);
	display: flex;
	align-items: stretch;
	gap: var(--size-xxLarge);
}

.blogPostSmall {
	margin: var(--size-large) auto;
	padding: var(--size-small) var(--size-medium);
	display: inline-flex;
	width: 33%;
	flex-direction: column;
	gap: var(--size-medium);

	.cardImage {
		margin-bottom: var(--size-large);
		min-height: 200px;
	}

	.postDateDiv {
		margin-bottom: var(--size-medium);
	}

	.tagDiv {
		margin-top: var(--size-large);
	}

	span {
		color: var(--color-white);
		margin: 0;
	}
}

.cardSection {
	flex: 1 1 50%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: var(--size-medium);

	.bodyText {
		margin: var(--size-medium) 0 !important;
	}
}

.cardImage {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: var(--border-radius);
	overflow: hidden;
	min-height: 300px;
}

.avatar {
	display: flex;
	align-items: center;
	border-radius: 50px;
	overflow: hidden;
	border: 3px solid var(--color-white);
}

.postDateDiv {
	display: flex;
	align-items: center;
	gap: var(--size-small);

	p {
		color: var(--color-copy-on-dark);
		margin: var(--size-xxSmall) 0 !important;
	}
}

.authorDiv {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--size-medium);

	p {
		color: var(--color-copy-on-dark);
		margin: var(--size-xxSmall) 0 !important;
	}
}

.authorDescription {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
}

.authorDetails {
	display: flex;
	gap: var(--size-medium);

	a {
		color: var(--color-white);
	}
}

.mainBlogPadding {
	padding: 0 var(--size-large);
}

.mainImage {
	position: relative;
	width: 100%;
	height: auto;
	align-items: stretch;
	min-height: 400px;
	border-radius: var(--border-radius);
	overflow: hidden;
	border: 2px solid #30294e;
}

.youtubeEmbed {
	position: relative;
	width: 100%;
	height: auto;
	align-items: stretch;
	min-height: 400px;
	border-radius: var(--border-radius);
	border: 3px solid #30294e;
	overflow: hidden;
}

.tagSortTitle {
	min-width: 256px;
}

.tagDiv {
	display: flex;
	flex-direction: row;
	gap: var(--size-small);
	margin-top: var(--size-xSmall);
	flex-wrap: wrap;

	div {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.12);
		border-radius: var(--size-xLarge);
		padding: var(--size-xxSmall) var(--size-medium);
		color: var(--color-copy-on-dark);
		cursor: pointer;
		height: 34px;
	}

	.selectedTag {
		border: 1px solid var(--color-selected-light);
		color: var(--color-selected-light);
	}
}

.dateDiv {
	color: var(--copy-on-dark);
}

.postTagDiv {
	margin: var(--size-large) 0 var(--size-xxxLarge);
	justify-content: center;
}

.suggestedPostDiv {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.suggestedPost {
	padding: var(--size-xSmall) var(--size-small);
	color: var(--color-gray-400);
	border-radius: var(--size-small);
	cursor: pointer;
	max-width: 300px;
}

.postBodyTop {
	margin-top: calc(-1 * var(--size-medium)) !important;
}

.headerSection {
	padding-bottom: var(--size-large) !important;
	padding-top: var(--size-large) !important;
}

.postBody {
	text-align: left;
	width: 100%;

	.codeBlock {
		margin-top: var(--size-medium);
		margin-bottom: var(--size-medium);
		> span {
			background-color: transparent !important;
			padding: var(--size-large);
			border: 1px solid var(--color-divider-on-dark);
			border-radius: var(--border-radius) !important;
			white-space: pre-wrap !important;

			@media screen and (max-width: 600px) {
				font-size: 12px !important;
			}
		}
	}

	.codeInline {
		background-color: var(--color-purple-black);
		border-radius: var(--size-xxSmall);
		border: 1px solid var(--color-divider-on-dark);
		font-family: 'IBM Plex Mono', 'Courier', 'monospace';
		font-size: 14.5px;
		font-weight: 400;
		line-height: 24px;
		padding: 1.5px 6px;
	}

	pre {
		overflow: auto;
	}

	h4 {
		font-size: var(--size-large);
	}

	p,
	li {
		font-size: 18px;
		line-height: 34px !important;
		color: var(--copy-on-dark);

		img {
			width: 100%;
		}
	}

	ol,
	ul {
		margin: var(--size-medium) 0;

		ul,
		ol {
			margin: 0;
		}

		li {
			font-size: 17px;
			font-weight: 400 !important;
		}
	}

	a {
		color: var(--color-secondary-200);
		font-weight: 600;
		text-decoration: none;
		word-break: break-word;
	}
}

.postBodyDivider {
	width: 100%;
	height: 1px;
	max-width: 800px;
	background-color: var(--color-divider-on-dark);
	margin: auto;
}

.otherArticlesHeader {
	margin-bottom: 40px !important;
}

@media screen and (max-width: 800px) {
	.otherArticlesHeader {
		margin-bottom: 32px !important;
	}
}

@media screen and (max-width: 800px) {
	.mainBlogPadding {
		padding: 0;
	}

	.blogPostSmall {
		width: 50%;
		margin: 0 0 100px;
	}

	.blogPost {
		padding: var(--size-small) var(--size-medium) var(--size-large)
			var(--size-medium);
		flex-direction: column;
		align-items: flex-start;
		gap: var(--size-large);
	}

	.cardSection {
		width: 100%;
	}

	.mainImage {
		min-height: 300px;
	}

	.tagHeader {
		flex-direction: column;
		gap: var(--size-xLarge);
	}

	.blogContainer {
		padding: 0;
		margin-top: 0;

		h4 {
			margin-left: var(--size-medium) !important;
			margin-top: 100px !important;
		}
	}
}

@media screen and (max-width: 600px) {
	.blogContainer {
		padding: 0;

		h4 {
			margin: var(--size-large) 0 0 0 !important;
		}
	}

	.tagHeader {
		gap: var(--size-small);
	}

	.tagContainer {
		padding: 0 var(--size-medium);
	}

	.cardImage {
		min-height: 200px !important;
	}

	.blogPostSmall {
		width: 100%;
		margin: 0 0 var(--size-xxLarge);
	}
}

.blogImageContainer {
	margin: 12px 0;
	border-radius: 8px;
	border: 1px solid #30294e;
	overflow: hidden;
	display: flex;
}

// Custom font styles for blog-specific text!!!

.blogText {
	p {
		margin: var(--size-small) 0;
	}

	b {
		font-weight: 600 !important;
	}

	strong {
		font-weight: 600 !important;
	}

	img {
		margin: 12px 0;
		border-radius: 8px;
		border: 1px solid #30294e;
		overflow: hidden;
		display: flex;
	}
}

h2.blogText + h3.blogText {
	margin-top: 0.8em !important;
}

h2.blogText,
h3.blogText {
	margin-bottom: 0.25em !important;
	margin-top: 1.5em !important;
}

h1.blogText {
	font-size: 58px;
	line-height: 76px !important;
	letter-spacing: -0.5px;
}

h2.blogText {
	font-size: 26px;
	line-height: 40px !important;
	font-weight: 600 !important;
}

h3.blogText {
	font-size: 22px;
	line-height: 34px !important;
	font-weight: 600 !important;
}

h4.blogText {
	font-size: 18px;
	line-height: 34px !important;
	font-weight: 600 !important;
}

h5.blogText {
	font-size: 16px;
	line-height: 34px !important;
	font-weight: 600 !important;
}

@media screen and (max-width: 600px) {
	h1.blogText {
		font-size: 32px;
		line-height: 40px !important;
		letter-spacing: 0;
	}
}

.blogTable {
	width: 100%;
	border: solid #30294e 1px;
	border-radius: 8px;
	overflow: hidden;
	margin-top: var(--size-medium);
	margin-bottom: var(--size-medium);

	table {
		width: 100%;
		height: 100%;
		table-layout: auto;

		thead {
			text-align: left;
		}

		th,
		td {
			padding: 4px 12px;
			border-bottom: solid 1px #30294e;
			border-left: solid 1px #30294e;

			&:first-child {
				border-left: none;
			}
		}

		th {
			padding: 8px 12px;
			font-size: 16px;
			font-weight: 500;
			line-height: 26px;
		}

		tbody {
			color: #dfdfdf;

			td {
				border-bottom: solid 1px #fff2;
			}

			tr:last-child > td {
				border-bottom: none;
			}
		}
	}
}
